<template>
	<view>
		<view v-if="loadshow&&!isSmall" class="fullloading" :style="{backgroundColor: bgcolor}">
			<image class="image" :src="loadingImg" :style="{width:iconwidth+'rpx',height:iconheight+'rpx'}"></image>
			<view class="text" v-if="text" :style="{fontSize:textsize+'rpx',color:textcolor}">{{text}}</view>
		</view>
		<view v-else :class="inView?'viewloading':'fullloading'">
			<image class="smallImage" :src="loadingSmallImg">
			</image>
			<view class="text" v-if="text" :style="{fontSize:textsize+'rpx',color:textcolor}">{{text}}</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		//是否在当前窗口内现在加载
		inView: {
			type: Boolean,
			default () {
				return false
			}
		},
		//是否为小型加载log
		isSmall: {
			type: Boolean,
			default () {
				return false
			}
		},
		loadicon: {
			type: String,
			default () {
				return ''
			}
		},
		text: {
			type: String,
			default () {
				return ''
			}
		},
		iconwidth: {
			type: [Number, String],
			default () {
				return 300
			}
		},
		iconheight: {
			type: [Number, String],
			default () {
				return 300
			}
		},
		textcolor: {
			type: String,
			default () {
				return '#afafaf'
			}
		},
		textsize: {
			type: [Number, String],
			default () {
				return 35
			}
		},
		bgcolor: {
			type: String,
			default () {
				return '#FBFBFB'
			}
		},
		loadshow: {
			type: Boolean,
			default () {
				return true
			}
		},
	})
	const loadingImg = ref('https://mp-251b8a98-d3c2-4db4-a13b-b664f8d59624.cdn.bspapp.com/common/loading.gif')
	const loadingSmallImg = ref('/static/smallLoading.gif')
	const errorImg = ref()
</script>
<style lang="scss">
	.fullloading {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		text-align: center;
		z-index: 99999;

		.image {
			width: 300rpx;
			height: 300rpx;
			margin-top: 50%;
		}

		.smallImage {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.viewloading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99999;

		.smallImage {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>